<template>
  <!--  意见反馈-->
  <div id="Feedback">
    <div class="content-head">
      <h2>意见反馈</h2>
    </div>
    <div class="content-body">
      <el-input
          placeholder="请输入用于接受反馈的邮箱"
          v-model="feedback.email"
          clearable>
      </el-input>
      <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入你对网站的建议"
          v-model="feedback.content">
      </el-input>
      <el-button @click="sendfeedback" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  name: "Feedback",
  data() {
    return {
      feedback: {
        email: '',    // 用于接受反馈的邮箱
        content: '',// 对网站的建议
      }
    }
  },
  methods: {
    ...mapActions('Home', ['sendFeedback']),
    // 提交意见反馈信息
    sendfeedback() {
      this.sendFeedback(this.feedback).then(value => {
        if (value['code'] === 200) {
          this.$message({
            message: value['info'],
            type: 'success'
          })
          this.feedback = {}
        } else {
          this.$message({
            message: value['info'],
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
/*意见反馈*/
#Feedback {
  background-color: white;
  min-height: 200px;
  margin-bottom: 20px;

  > .content-head {
    h2 {
      font-weight: bolder;
    }
  }

  > .content-body {
    padding: 10px 20px;

    > .el-input {
      margin-bottom: 10px;
    }

    > .el-textarea {
      margin-bottom: 10px;

      > textarea {
        resize: none;
      }
    }

    > button {
      width: 100%;
    }
  }
}
</style>